<template>
  <section id="mysql-manager-slowlog">
<el-form :inline="true" :model="formInline" class="demo-form-inline">
  <el-form-item label="日志时间">
    <el-col :span="11">
      <el-time-picker placeholder="选择时间" v-model="formInline.date2" style="width: 100%;" size="mini"></el-time-picker>
    </el-col>
    <el-col class="line" :span="2" style="text-align: center">-</el-col>
    <el-col :span="11">
      <el-time-picker placeholder="选择时间" v-model="formInline.date2" style="width: 100%;" size="mini"></el-time-picker>
    </el-col>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit" size="mini">查询</el-button>
  </el-form-item>
</el-form>


    <el-table
            fit
            :data="slowLogTable.slice((currpage - 1) * pagesize, currpage * pagesize)"
            border
            :row-style="rowHeigthSetting"

            >
      <el-table-column
              prop="ts_max"
              label="ts_max"
              width="200">
      </el-table-column>
      <el-table-column
              prop="query_time_max"
              label="query_time_max"
              width="180">
      </el-table-column>
      <el-table-column
              prop="query_time_min"
              label="query_time_min"
              width="180">
      </el-table-column>

      <el-table-column
              prop="query_time_avg"
              label="query_time_avg"
              width="180">
      </el-table-column>
      <el-table-column
              show-overflow-tooltip
              prop="fingerprint"
              label="fingerprint"
      >
      </el-table-column>
      <el-table-column
              show-overflow-tooltip
              prop="sample"
              label="sample sql"
              >
      </el-table-column>
    </el-table>
    <el-pagination background
                   layout="prev, pager, next, sizes, total"
                   :page-sizes="[5, 10, 15, 20,50]"
                   :page-size="pagesize"
                   :total="slowLogTable.length"
                   @current-change="handleCurrentChange"
                   @size-change="handleSizeChange"
    >
    </el-pagination>

  </section>
</template>
<script>
    import { getSlowLog } from '../../../api/api'
    export default {
        data() {
            return {
                formInline: {
                    user: '',
                    region: '',
                    date1: '',
                    date2: '',

                },
                slowLogTable: [
                    {
                        ts_max: "2019-05-10T14:04:14Z",
                        query_time_min: 2.08,
                        query_time_max: 3.01,
                        query_time_avg: 2.63,
                        fingerprint: "select sleep(?),name from test",
                        sample: "SELECT * FROM `bid` where buyer is not null ORDER BY end_time SELECT * FROM `bid` where buyer is not null ORDER BY end_timeSELECT * FROM `bid` where buyer is not null ORDER BY end_time"
                    }
                ],
                pagesize: 10,
                currpage: 1
            }
        },
        methods: {
            onSubmit() {
                alert("TODO: pt-query-dig slow.log")
            },
            handleCurrentChange(cpage) {
                this.currpage = cpage;
            },
            handleSizeChange(psize) {
                this.pagesize = psize;
            },
            getSlowLogs(){
                getSlowLog().then((res) => {
                    console.log(res.data.slowlog)
                    this.slowLogTable = res.data.slowlog
                })
            }
        },
        mounted() {
            //console.log("debug here" , this.$route.params.name)
            this.getSlowLogs();
        },
    }
</script>


<style>
  #mysql-manager-slowlog .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }

  #mysql-manager-slowlog .el-aside {
    color: #333;
  }
  #mysql-manager-slowlog .el-table td{
    padding: 0;
  }
  #mysql-manager-slowlog .el-pagination{
    text-align: right;
  }
</style>